<template>
    <div class="pinpai web-inner">
        <div class="pinpai-title">
            <img :src="brandImg+category_image" alt="">
        </div>
        <div class="main web-inner">
            <div class="rementuijian" v-if="bestbrand.length>0">
                <div class="defaut-title">
                    <div class="title-left">
                        <span>熱門推薦</span>
                    </div>
                </div>
                <div class="rementuijian-main">
                    <div class="rementuijian-main-left fangda">
                        <a :href="'#/detail/'+bestbrand[0].brand_id">
                            <img :src="brandImg+bestbrand[0].brand_logo" alt="">
                        </a>
                    </div>
                    <div class="rementuijian-main-right">
                        <div class="fangda">
                            <a :href="'#/detail/'+bestbrand[1].brand_id">
                                <img :src="brandImg+bestbrand[1].brand_logo" alt="">
                            </a>
                        </div>
                        <div class="fangda">
                            <a :href="'#/detail/'+bestbrand[2].brand_id">
                                <img :src="brandImg+bestbrand[2].brand_logo" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top10" v-if="hotbrand.length>0">
                <div class="defaut-title">
                    <div class="title-left">
                        <span>精選TOP10</span>
                    </div>
                </div>
                <div class="top10-main">
                    <div class="top10-main-item" v-for="(item,index) in hotbrand" :key="index">
                        <a :href="'#/detail/'+item.brand_id">
                            <div class="top10-main-item-top fangda">
                                <img :src="brandImg+item.brand_logo" alt="">
                            </div>
                            <div class="top10-main-item-bottom">
                                {{item.brand_name}}
                            </div>
                        </a>

                    </div>
                </div>
            </div>
            <div class="pinpai-list">
                <div class="defaut-title">
                    <div class="title-left">
                        <span>品牌列表</span>
                    </div>
                </div>
                <div class="pinpai-list-main web-inner">
                    <div class="pinpai-list-main-left">
                         <div class="page">
                             <div class="page-items">
                                 <a :href="'#/detail/'+item.brand_id" v-for="item in pageContent" class="page-item">
                                     <div class="top">
                                         <div class="top-left">
                                             <span class="top-left-title">
                                                 {{item.brand_name}}
                                             </span>
                                             <!--<span class="top-left-tips">-->
                                                 <!--<span class="tips1">含生財器具</span>-->
                                                 <!--<span class="tips2">含裝修</span>-->
                                                 <!--<span class="tips3">教育訓練</span>-->
                                                 <!--<span class="tips4">免加盟金</span>-->
                                                 <!--<span class="tips5">免權利金</span>-->
                                             <!--</span>-->
                                         </div>
                                         <div class="top-right">
                                             <span>{{item.fran_fee}}</span>
                                             <span>線上咨詢</span>
                                         </div>
                                     </div>
                                     <div class="center" v-if="item.brand_image.length>0">
                                         <ad :banner="dealData(item.brand_image)" :name="item.brand_id"></ad>
                                     </div>
                                     <div class="bottom">
                                         <!--<div class="bottom-title">-->
                                             <!--<span>文教生活技能</span>-->
                                             <!--<span class="red-font">文教生活</span>-->
                                         <!--</div>-->
                                         <div class="des">
                                             <span v-html="item.intro_text"></span><span class="red-font" style="cursor: pointer">看更多</span>
                                         </div>
                                         <div class="bottom-list">
                                             <div class="bottom-list-item" v-for="data in item.brand_apply">
                                                 {{"【"+data.location + "】" + " "+ data.name +" 先生/小姐 預算約"+data.budget + "左右 " + data.desc}}
                                             </div>
                                         </div>
                                         <!--<div class="bottom-timer">-->
                                             <!--更新時間：2019-04-25 12:05:15-->
                                         <!--</div>-->
                                     </div>
                                 </a>
                             </div>
                             <div class="pagenation">
                                 <el-button @click="changePage(-1)" :disabled="page===1"  icon="el-icon-arrow-left">上一页</el-button>
                                 <el-button @click="changePage(1)" :disabled="loadAll===true">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                             </div>
                         </div>
                        <commonForm></commonForm>
                    </div>
                    <div class="pinpai-list-main-right">
                        <div class="big-yuanfen fangda">
                            <a :href="h2.link">
                                <img :src="imgUrl+h2.image" alt="">
                            </a>
                        </div>
                        <div class="xuqiu">
                            <indexXuqiu></indexXuqiu>
                        </div>
                            <div v-for="(item,index) in h3" class="yuanfen fangda">
                                <a :href="item.link">
                                    <img :src="imgUrl+item.image" alt="">
                                </a>
                            </div>
                        <div class="baodao">
                            <indexBaodao></indexBaodao>
                        </div>
                        <!--<div class="news">-->
                            <!--<indexNews></indexNews>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
            <div class="common-bottom fangda">
                <a :href="bottomImg.link">
                    <img :src="imgUrl+bottomImg.image" alt="">
                </a>
            </div>
        </div>
    </div>
</template>

<script>
    import commonForm from "../components/common-form-jiameng"
    import ad from "../components/ad"
    import indexXuqiu from "../components/index-xuqiu"
    import indexBaodao from "../components/index-baodao"
    import indexNews from "../components/index-news"
    import qs from 'qs';
    export default {
        name: "pinpai",
        components:{
            indexXuqiu,
            indexBaodao,
            indexNews,
            ad,
            commonForm
        },
        data() {
            var checkPhone = (rule, value, callback) => {
                let mobilePatternTW = /^(\+886\s)?[0]{1}[9]{1}\d{8}$/;
                if(mobilePatternTW.test(value)){
                    callback();
                }else{
                    callback(new Error('請輸入正確的電話號碼'));
                }
            };
            return {
                id:this.$route.params.order,
                category_image:"",
                category_name:"",
                bestbrand:[],
                hotbrand:[],
                page:1,
                loadAll:false,
                pageSize:5,
                pageContent:[],
                h1:"",
                h2:"",
                h3:[],
                imgList:[],
                bottomImg:"",
            }
        },
        mounted() {
            this.getBrandSublist()
            this.changePage(0)
            this.getImg()
        },
        methods: {
            getImg() {
                this.$http.post(this.API.get_banner_home).then((res) => {
                    let $this = this;
                console.log(res);
                if(res.status ===200 && res.data.length>0){
                    res.data.forEach((item) => {
                        if(item.location==="h1"){
                        this.h1=item;
                    }
                    if(item.location==="h2"){
                        this.h2=item;
                    }
                    if(item.location==="h3"){
                        this.h3.push(item);
                    }
                    if(item.location==="h0"){
                        this.imgList.push(item);
                    }
                    if(item.location==="h4"){
                        this.bottomImg=item;
                    }
                    console.log(this.bottomImg);
                })
                }
            })
            },
            getBrandSublist() {
                this.$http({
                    method:"post",
                    url: this.API.get_brand_sublist,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    data: qs.stringify({category_id:this.id})
                }).then((res) => {
                if(res.status ===200 && res.data){
                  console.log(res,"呵呵");
                  this.category_image = res.data.category_image;
                    this.hotbrand = res.data.hotbrand;
                    this.category_name = res.data.category_name;
                    if(res.data.bestbrand.length>=3){
                        this.bestbrand = res.data.bestbrand;
                    }else{
                        this.bestbrand =this.bestbrand.concat(res.data.bestbrand);
                        this.bestbrand =this.bestbrand.concat(res.data.bestbrand);
                        this.bestbrand =this.bestbrand.concat(res.data.bestbrand);
                    }
                }
            })
            },
            changePage(num) {
                this.page+=num;
                this.$http({
                    method:"post",
                    url: this.API.get_brand_sublist_page,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    data: qs.stringify({category_id:this.id,page:this.page})
                }).then((res) => {
                if(res.status ===200 && res.data){
                    this.pageContent = res.data;
                    if(res.data.length<this.pageSize){
                        this.loadAll = true;
                    }else{
                        this.loadAll = false;
                    }
                }
            })
            },
            dealData(arr){
                return this.Utils.sliceArr(arr,4)
            }
        },
        watch:{
            $route:function (n, o) {
                location.reload()
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../style/base";
    .pinpai{
        margin: 0 auto;
        margin-top: 45px;
        .pinpai-title{
            width: 100%;
            img{
                width: 100%;
            }
        }
        .main{
            margin: 0 auto;
            .rementuijian-main{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                height: 300px;
                .rementuijian-main-left{
                    flex: 3;
                    height: 100%;
                    margin-right: 10px;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .rementuijian-main-right{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    div{
                        flex: 1;
                        margin-bottom: 10px;
                        overflow: hidden;
                        img{
                            width:100%;
                            height: 100%;
                        }
                        &:last-child{
                            margin-bottom: 0;
                        }
                    }
                }
            }
            .top10-main{
                background-color: #f9f9f9;
                padding:10px;
                .top10-main-item{
                    display: inline-block;
                    width: 19%;
                    margin: 0.5%;
                    border: 1px solid #e6e6e6;
                    background-color: #ffffff;
                    &:nth-child(5n){
                        margin-right: 0;
                    }
                    .top10-main-item-top{
                        width: 100%;
                        height: 142px;
                        line-height: 142px;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        overflow: hidden;
                        img{
                            width: 100%;
                        }
                    }
                    .top10-main-item-bottom{
                        box-sizing: border-box;
                        width: 100%;
                        height: 40px;
                        line-height: 40px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        padding: 0 10px;
                        text-align: center;
                    }
                }
            }
            .pinpai-list-main{
                margin: 0 auto;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                .pinpai-list-main-left{
                    width: 70%;
                    margin-right: 0.5%;
                }
                .pinpai-list-main-right{
                    width:29.5%;
                    .big-yuanfen{
                        height: 386px;
                        width: 100%;
                        margin-bottom: 42px;
                        a{
                            display: inline-block;
                            width: 100%;
                            height: 100%;
                            overflow: hidden;
                            img{
                                width: 100%;
                            }
                        }
                    }
                    .xuqiu{
                        width: 100%;
                        box-sizing: border-box;
                        margin-bottom: 45px;
                    }
                    .yuanfen{
                        width: 100%;
                        /*height:100px;*/
                        margin-bottom: 45px;
                        cursor: pointer;
                        img{
                            width: 100%;
                        }
                    }
                }
            }
            .page-items{
                .page-item{
                    display: block;
                    box-sizing: border-box;
                    margin-bottom: 20px;
                    text-decoration: none;
                    &:hover{
                        border: 1px solid @fontColor;
                    }
                    padding: 10px;
                    box-shadow: 0 0 2px 2px #dbdbdb;
                    .top{
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        padding:  0 10px;
                        align-items: center;
                        margin-bottom: 10px;
                        .top-left{
                            display: flex;
                            flex-direction: column;

                            .top-left-title{
                                font-size: 18px;
                                line-height: 30px;
                                color: #c24e35;
                                font-weight: bold;
                            }
                            .top-left-tips {
                                margin-top: 10px;
                                span{
                                    font-size: 12px;
                                    padding: 5px;
                                    line-height: 12px;
                                    margin-right: 5px;
                                    &.tips1{
                                        color:#04935f;
                                        background-color: #dcfdeb;
                                    }
                                    &.tips2{
                                        color:#3399ff;
                                        background-color: #e0efff;
                                    }
                                    &.tips3{
                                        color:#ed625e;
                                        background-color: #ffeaea;
                                    }
                                    &.tips4{
                                        color:#d388d7;
                                        background-color: #ffe4ff;
                                    }
                                    &.tips5{
                                        color:#90927b;
                                        background-color: #eaeaea;
                                    }
                                }
                            }
                        }
                        .top-right{
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            border: 1px solid #e6e6e6;
                            width: 100px;
                            text-align: center;
                            font-size: 16px;
                            line-height: 22px;
                            cursor: pointer;
                            span{
                                width: 100%;
                                &:first-child{
                                    color: @fontColor;
                                }
                                &:last-child{
                                    color: #ffffff;
                                    background-color: #93b00b;

                                }
                            }

                        }
                    }
                    .bottom{
                        font-size: 12px;
                        color: @fontBaseColor;
                        padding: 0 10px;
                        .des{
                            font-size: 12px !important;
                            margin-top: 20px;
                        }
                        .bottom-title{
                            span{
                                margin-right: 10px;
                            }
                        }
                        .bottom-list{
                            margin-top: 10px;
                            margin-bottom: 10px;
                            .bottom-list-item{
                                box-sizing: border-box;
                                height: 25px;
                                line-height: 25px;
                                border-bottom: 1px dashed #e6e6e6;
                                position: relative;
                                padding-left: 35px;
                                width: 100%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                &:first-child{
                                    border-top: 1px dashed #e6e6e6;
                                }
                                &:before{
                                    content: "";
                                    position: absolute;
                                    width: 14px;
                                    height: 14px;
                                    background-color: #e1e1e1;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    left: 18px;
                                    border-radius: 50%;
                                }
                            }
                        }
                        .bottom-timer{
                            text-align: right;
                        }
                    }
                    .center{
                        padding: 0 20px;
                    }
                }

            }
            .form{
                  width: 100%;
                  margin-top: 10px;
                  .form-title{
                      width: 100%;
                      display: flex;
                      flex-direction: column;
                      img{
                          width: 100%;
                      }
                  }
                  .form-main{
                      border: 2px solid #bf0b32;
                  }
              }
        }
        .pagenation{
            width: 300px;
            margin: 10px auto;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
    }

</style>
<style lang="less">
    @import "../style/base";
    .red-font{
        color: @fontColor;
    }

    .defaut-title{
        height: 48px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 4px solid #2e436d;
        margin-bottom: 15px;
        margin-top: 20px;
        .title-left{
            span{
                display: inline-block;
                padding:  0 18px;
                height: 48px;
                line-height: 48px;
                font-size: 24px;
                position: relative;
                cursor: pointer;
                    background-color:#2e436d;
                    color: #ffffff;
                &:after{
                    content: "";
                    position: absolute;
                    height: 30px;
                    top: 9px;
                    right: 0;
                    width: 2px;
                    background-color: #2e436d;
                }
                &:last-child::after{
                    display: none;
                }

            }
        }
        .title-right{
            cursor: pointer;
            font-size: 16px;
            line-height: 16px;
            padding: 5px;
            color: gray;
            border: 1px solid gray;
        }
    }
</style>